<template>
  <div class="app-container">
    <el-card>
      <el-form
        ref="form"
        :rules="rules"
        :model="form"
        label-width="100px"
        size="small"
      >
        <el-form-item label="银行" prop="bankId">
          <el-select
            style="width: 500px"
            v-model="form.bankId"
            placeholder="请选择"
          >
            <el-option
              v-for="item in bankList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="支行" prop="name">
          <el-input
            style="width: 500px"
            maxlength="50"
            v-model="form.name"
            placeholder="请输入支行名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="支行地址" prop="address">
          <el-input
            style="width: 500px"
            v-model="form.address"
            maxlength="100"
            placeholder="请输入支行地址"
            class="dialogWidth"
          ></el-input>
        </el-form-item>
        <el-form-item label="经纬度：" prop="latitude">
          <el-tooltip content="请点击查找位置选择位置">
            <el-input
              style="width: 500px"
              v-model="form.latitude "
              placeholder="请查找位置"
            >
              <el-button slot="append" @click="onSearch">查找位置</el-button>
            </el-input>
          </el-tooltip>
        </el-form-item>
        <el-form-item label="电话" prop="telephone">
          <el-input
            style="width: 500px"
            v-model="form.telephone"
            placeholder="请输入电话号码"
          ></el-input>
          <span style="margin-left: 20px; color: #999999"
            >提示：多个电话用英文逗号隔开</span
          >
        </el-form-item>
        <el-form-item label="发布平台：" prop="platformType">
          <el-checkbox-group v-model="form.platformType">
            <el-checkbox
              v-for="city in platformTypeList"
              :label="city.dictValue"
              :key="city.dictValue"
              >{{ city.dictLabel }}</el-checkbox
            >
          </el-checkbox-group>
        </el-form-item>

        <el-form-item>
          <el-button
            v-debounce
            :disabled="isDetail"
            type="primary"
            @click="submitForm('form')"
            >提交</el-button
          >
          <el-button @click="cancel">取消</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-dialog
      v-model="modalMap"
      title="上传经纬度"
      :visible.sync="modalMap"
      append-to-body
      class="mapBox"
      width="500px"
      height="500px"
    >
      <iframe
        id="mapPage"
        width="100%"
        height="600px"
        frameborder="0"
        v-bind:src="keyUrl"
      ></iframe>
    </el-dialog>
  </div>
</template>

<script>
import { getBankList } from "@/api/system";
import { bankBook, bankBookid, edbankBook } from "@/api/tool";
export default {
  data() {
    return {
      modalMap: false,
      keyUrl: `https://apis.map.qq.com/tools/locpicker?type=1&key=J4BBZ-OXBYJ-7FLFB-KET7G-UJNCJ-IRBDX&referer=myapp`,
      form: {
        address: "",
        latitude: "",
        bankId: "",
        name: "",
        telephone: "",
        platformType: ["2"],
      },
      platformTypeList: [],
      bankList: [],
      rules: {
        bankId: [{ required: true, message: "请选择银行", trigger: "blur" }],
        // title: [{ required: true, message: "请输入支行名称", trigger: "blur" }],
        telephone: [
          { required: true, message: "请输入电话号码", trigger: "blur" },
        ],
        platformType: [
          { required: true, message: "请选择发布平台", trigger: "blur" },
        ],
      },
      isDetail: false,
    };
  },
  async created() {
    this.platformTypeList = await this.$getDictData("platform_type");
    this.getBankList();
    if (this.$route.query.id) {
      this.$route.meta.title = "编辑行口通讯录";
      this.getInfo();
    }
    if (this.$route.query.id && this.$route.query.type == "detail") {
      this.isDetail = true;
      this.$route.meta.title = "查看行口通讯录";
      this.getInfo();
    }
  },
  mounted() {
    window.addEventListener(
      "message",
      function (event) {
        console.log(event.data);
        // 接收位置信息，用户选择确认位置点后选点组件会触发该事件，回传用户的位置信息
        var loc = event.data;
        if (loc && loc.module === "locationPicker") {
          // 防止其他应用也会向该页面post信息，需判断module是否为'locationPicker'
          window.parent.selectAdderss(loc);
        }
      },
      false
    );
    window.selectAdderss = this.selectAdderss;
  },
  methods: {
    onSearch() {
      this.modalMap = true;
    },
    selectAdderss(data) {
      console.log("data111", data);
      this.form.address = data.poiaddress;
      this.form.latitude = data.latlng.lat + "," + data.latlng.lng;
      this.modalMap = false;
    },
    cancel() {
      this.$router.go(-1);
    },
    getInfo() {
      bankBookid(this.$route.query.id).then((res) => {
        res.data.platformType = res.data.platformType.split(",");
        if (res.data.location) {
        res.data.latitude = `${res.data.location.lat},${res.data.location.lon}`;
        }
        this.form = Object.assign({}, res.data);
      });
    },
    getBankList() {
      getBankList().then((res) => {
        this.bankList = res.data;
      });
    },
    submitForm(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          let params = Object.assign({}, this.form);
          params.lon = params.latitude && params.latitude.split(",")[1];
          params.lat = params.latitude && params.latitude.split(",")[0];
          params.platformType = params.platformType.join(",");
          delete params.latitude;
          if (params.id) {
            edbankBook(params).then((res) => {
              this.$message.success("修改成功");
              setTimeout(() => {
                this.$router.go(-1);
              }, 500);
            });
          } else {
            bankBook(params).then((res) => {
              this.$message({
                message: "添加成功",
              });
              setTimeout(() => {
                this.$router.go(-1);
              }, 500);
            });
          }
        }
      });
    },
  },
};
</script>

<style></style>
